<template>
 <div v-if="Object.keys(goods).length!=0">
     <!-- 判断对象是否为空  v-if="Object.keys(goods).length!=0"-->
  <div class="title">
      {{goods.title}}
  </div>
  <div class="price">
        <span class="newPrice">{{goods.newPrice}}</span> 
        <del class="oldPrice">{{goods.oldPrice}}</del> 
        <div class="discount">{{goods.discount}}</div>
  </div>
  <div class="sell">
      <span class="sellNum">{{goods.columns[0]}}</span>
      <span class="collect">{{goods.columns[1]}}</span>
      <span class="send">{{goods.services[goods.services.length-1].name}}</span>
  </div>
  <div class="info-service">
      <span class="info-service-item" v-for="index in goods.services.length-1" :key="index">
          <img :src="goods.services[index-1].icon" alt="">
          <span>{{goods.services[index-1].name}}</span>
      </span>
  </div>
 </div>
</template>

<script>

 export default {
  name:'DetailBaseInfo',
  data () {
   return {

   };
  },
    props: {
        goods:{
            type:Object,
            defaute(){
                return {}
            }
        }
    },
  components: {},
  created () {
     
    console.log('this.goods :',this.goods );
  },
  methods: {},

 

 }

</script>
<style scoped>
    .title{
        margin-top: 14px;
        font-size: 18px;
        color:black ;
        font-weight: 600;
    }
    .price{
        padding: 10px 6px;
    }
    .price .newPrice{
        color:var(--color-tint);
        font-size: 30px;
        font-weight: 600;
    }
     .price .oldPrice{
        margin-left: 5px;
    }
    .price .discount{
        display: inline;
        background: var(--color-high-text);
        color: white;
        border-radius: 5px;
        margin-left: 5px;
        height: 10px;
        
    }
    .sell{
        padding: 10px 6px;
        border-bottom: 1px solid rgb(199, 196, 196);
        display: flex;
        justify-content:space-between;
    }
  
    .info-service{
        padding: 10px ;
        display: flex;
        justify-content: space-between;
        margin-top:10px ;
    }
    .info-service-item img{
        width: 10px;
        height: 10px;
    }
    .info-service-item span{
        font-size: 10px;
    }
</style>